<template>
    <div class="panel">
        <p class="panel-heading">滑动以解锁</p>
        <div class="panel-block control-set">
            <input type="range" class="slide" min="0" :max="maxValue" v-model="currentValue" @mouseup="mouseUp" @mousedown="mouseDown" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.control-set {
    background-color: white;
}

.slide {
    width: 100%;
    -webkit-appearance: none;
    &:focus {
        outline: none;
    }
    &:active::-webkit-slider-thumb {
        transform: scale(1.03)
    }
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        display: block;
        width: 3rem;
        height: 2rem;
        border-radius: 0.25rem;
        background-color: #878787;
        transform: scale(1);
        transition: transform ease-out 100ms;
    }
    &::-webkit-slider-runnable-track {
        padding: 0.25rem;
        border-radius: 0.25rem;
        background-color: #dde0e3;
    }
}
</style>

<script>
export default {
    data() {
        return {
            rafID: null,
            maxValue: 50,
            currentValue: 0
        };
    },
    methods: {
        animateHandler() {
            this.currentValue--;
            if (this.currentValue > -1) {
                window.requestAnimationFrame(this.animateHandler);
            }
        },
        mouseDown() {
            window.cancelAnimationFrame(this.rafID);
        },
        mouseUp() {
            if (this.currentValue >= this.maxValue) {
                this.currentValue = 0;
                this.$emit('unlock-granted', null);
            } else {
                this.rafID = window.requestAnimationFrame(this.animateHandler);
            }
        },
    }
}
</script>
